<template>
  <!-- 一个与头部等高的 系统名称 -->
  <div class="system_name" :style="systemTitleStyle">
    <template v-if="!baseStore.isCollapse">{{ props.systemTitle }}</template>
    <template v-else>
      <img :src="props.systemLogo" alt="" v-if="props.systemLogo!=undefined">
    </template>
  </div>
</template>

<script setup>
import { BaseStore } from "../stores/base_store";
const props = defineProps({
  'titleHeight':{default:60},
  'systemTitle': {default:'陈年管理系统'},
  'systemTitleStyle': {default:{}},
  'systemLogo':{},
});
// 初始样式默认值 高度和行高都是固定值
const systemTitleStyle = {
  height: props.titleHeight + "px",
  "line-height": props.titleHeight + "px",
  ...(props.systemTitleStyle ? props.systemTitleStyle : {})
};

const baseStore=BaseStore()
</script>

<style lang="scss" scoped>
.system_name{
  text-align: center;
  background-color: '#00284d';
  color: '#00b6c6';
  font-weight: bolder;
  img{
    padding: 10px;
    width: 100%;
  }
}
</style>